<html>

<head>
    <title>定时调度历史列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../static/react/react.development.js" type="text/javascript"></script>
    <script src="../../static/react/react-dom.development.js" type="text/javascript"></script>
    <script src="../../static/react/moment-with-locales.min.js" type="text/javascript"></script>
    <script src="../../static/react/babel.min.js" type="text/javascript"></script>
    <!-- antd -->
    <link href="../../static/react/antd/antd.min.css" rel="stylesheet" type="text/css"/>
    <script src="../../static/react/antd/antd-with-locales.min.js" type="text/javascript"></script>
    <!-- axios -->
    <script src="../../static/react/axios.min.js" type="text/javascript"></script>
    <script src="../../static/react/qs.js" type="text/javascript"></script>
    <script src="../../static/react/lodash.min.js" type="text/javascript"></script>
    <script src="../../static/react/request.js" type="text/javascript"></script>
    <script src="../../ffres/dict/all.js" type="text/javascript"></script>
    <link href="../../static/react/common.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    // 请求后台相对路径
    const baseURL = "../../"
    // ant design 组件别名引用
    const {Row, Col, Form, Input, Select, DatePicker, Button, Table, Modal, message} = antd

    // 业务组件
    class App extends React.Component {
        constructor(props) {
            super(props)
            // 在构造器中获取引用实例
            this.formRef = React.createRef()
            this.modelFormRef = React.createRef()
            // 将组件内函数绑定 this 上下文
            this.query = this.query.bind(this)
            this.reset = this.reset.bind(this)
            this.doAdd = this.doAdd.bind(this)
            this.doUpdate = this.doUpdate.bind(this)
            this.doDelete = this.doDelete.bind(this)
            this.doView = this.doView.bind(this)
            this.handleModelClose = this.handleModelClose.bind(this)
            this.handleModlelOk = this.handleModlelOk.bind(this)
            this.tableSelect = this.tableSelect.bind(this)
            this.doReturn = this.doReturn.bind(this)

            //获取url参数
            let search = window.location.search
            if (search.startsWith('?')) {
                search = search.substring(1, search.length)
            }
            search = Qs.parse(search)
            // 初始组件数据
            this.state = {
                list: [],
                ...search,
                pageInfo: {
                    page: 1,
                    size: 20,
                    total: 0,
                },
                modelTitle: "",
                show: "",
                loading: false,
                opType: "", // 操作类型
                rowSelection: null,
                selectedRowKeys: []
            }
        }

        reset() {
            this.formRef.current.resetFields()
        }

        init(page) {
            const self = this
            const pageInfo = this.state.pageInfo
            if (!page || typeof page != (typeof 1)) {
                pageInfo.page = 1;
            } else {
                pageInfo.page = page;
            }
            self.setState({pageInfo: pageInfo})
            API.request({
                baseURL: baseURL,
                method: "post",
                dataType: "form",
                url: "api/s/srvs/cron/hiss/",
                data: Qs.stringify({
                    // 查询条件值通过 Form 获取
                    jobCode: self.state.jobCode,
                    // 分页信息
                    ...this.state.pageInfo
                })
            }).then(function (data) {
                const pageInfo = self.state.pageInfo
                pageInfo.total = data.total
                // 回写 state 中的值后  通过 setState 通知 react 更新 DOM
                self.setState({
                    list: data.rows.map(function (item, index) {
                        return {...item, key: index}
                    }),
                    pageInfo: pageInfo,
                })
            })
        }

        // 查询列表
        query(page) {
            const self = this
            const pageInfo = this.state.pageInfo
            if (!page || typeof page != (typeof 1)) {
                pageInfo.page = 1;
            } else {
                pageInfo.page = page;
            }
            self.setState({pageInfo: pageInfo})
            API.request({
                baseURL: baseURL,
                method: "post",
                dataType: "form",
                url: "api/s/srvs/cron/hiss/",
                data: Qs.stringify({
                    // 查询条件值通过 Form 获取
                    ...this.formRef.current.getFieldsValue(),
                    // 分页信息
                    ...this.state.pageInfo
                })
            }).then(function (data) {
                const pageInfo = self.state.pageInfo
                pageInfo.total = data.total
                // 回写 state 中的值后  通过 setState 通知 react 更新 DOM
                self.setState({
                    list: data.rows.map(function (item, index) {
                        return {...item, key: index}
                    }),
                    pageInfo: pageInfo,
                })
            })

        }

        tableSelect(selectedRowKeys, selectedRows) {
            if (selectedRows && selectedRows.length > 0) {
                this.setState({
                    selectedRowKeys,
                    rowSelection: selectedRows[0]
                })
            }
        }

        doReturn() {
            window.location.href = 'SSrvsCronConfList.html?';
        }

        doAdd() {
            this.setState({show: true, modelTitle: "定时调度历史列表新增", opType: "add"});
            setTimeout(() => this.modelFormRef.current.resetFields(), 50)
        }

        doUpdate() {
            const self = this
            if (self.state.rowSelection) {
                this.setState({show: true, modelTitle: "定时调度历史列表修改", opType: "update"});
                setTimeout(() => {
                    this.modelFormRef.current.setFieldsValue(Object.assign(
                        this.state.rowSelection,
                        {
                            startTime: moment(this.state.rowSelection.startTime, "YYYY-MM-DD HH:mm:ss"),
                            endTime: moment(this.state.rowSelection.endTime, "YYYY-MM-DD HH:mm:ss"),
                        }
                    ))
                }, 50)
            } else {
                message.warning("请选择一条数据！")
            }
        }

        doDelete() {
            const self = this
            if (self.state.rowSelection) {
                Modal.confirm({
                    title: '删除提示',
                    content: '你确定要删除这条记录？',
                    okText: '确认',
                    cancelText: '取消',
                    onOk() {
                        return new Promise((resolve, reject) => {
                            API.request({
                                baseURL: baseURL,
                                method: "delete",
                                url: "api/s/srvs/cron/conf",
                                data: self.state.rowSelection,
                            }).then(function (data) {
                                message.success("记录删除成功!")
                                resolve()
                                self.query(self.state.pageInfo.page)
                                self.setState({
                                    selectedRowKeys: []
                                })
                            })
                        });
                    },
                });
            } else {
                message.warning("请选择一条数据！")
            }
        }

        doView() {
            const self = this
            if (self.state.rowSelection) {
                this.setState({show: true, modelTitle: "定时调度历史列表详情", opType: "view"});
                setTimeout(() => {
                    this.modelFormRef.current.setFieldsValue(Object.assign(
                        this.state.rowSelection,
                        {
                            startTime: moment(this.state.rowSelection.startTime, "YYYY-MM-DD HH:mm:ss"),
                            endTime: moment(this.state.rowSelection.endTime, "YYYY-MM-DD HH:mm:ss"),
                        }
                    ))
                }, 50)
            } else {
                message.warning("请选择一条数据！")
            }
        }


        handleModelClose() {
            this.setState({
                show: false
            })
            this.modelFormRef.current.setFieldsValue({})
        }

        handleModlelOk() {
            const self = this
            const {opType} = self.state
            self.setState({
                loading: true
            })
            if (opType == "add") {
                self.modelFormRef.current.validateFields().then(function (values) {
                    API.request({
                        baseURL: baseURL,
                        method: "post",
                        url: "api/s/srvs/cron/his",
                        data: Object.assign(values, {
                            startTime: values.startTime ? values.endTime.format("YYYY-MM-DD HH:mm:ss") : "",
                            endTime: values.endTime ? values.endTime.format("YYYY-MM-DD HH:mm:ss") : "",
                        })
                    }).then(function (data) {
                        message.success("操作成功");
                        self.setState({loading: false, show: false});
                        self.query(self.state.pageInfo.page);
                    }).catch(function (error) {
                        message.warning("操作失败");
                        self.setState({loading: false});
                    })
                }).catch(function (errorInfo) {
                    self.setState({loading: false})
                })
            } else if (opType == "update") {
                self.modelFormRef.current.validateFields().then(function (values) {
                    API.request({
                        baseURL: baseURL,
                        method: "put",
                        url: "api/s/srvs/cron/his",
                        data: Object.assign(values, {
                            startTime: values.startTime ? values.startTime.format("YYYY-MM-DD HH:mm:ss") : "",
                            endTime: values.endTime ? values.endTime.format("YYYY-MM-DD HH:mm:ss") : "",
                        })
                    }).then(function (data) {
                        message.success("操作成功");
                        self.setState({loading: false, show: false});
                        self.query(self.state.pageInfo.page);
                    }).catch(function (error) {
                        message.warning("操作失败");
                        self.setState({loading: false});
                    })
                }).catch(function (errorInfo) {
                    self.setState({loading: false});
                })
            } else {
                self.setState({loading: false, show: false})
            }
        }

        componentDidMount() {
            //this.query()
            this.init()
        }

        render() {
            return (
                <div style={{padding: "15px"}}>
                    {/* ref 创建 Form 实例的引用 */}
                    <Form ref={this.formRef}>
                        <Row>
                            <Col span="8">
                                <Form.Item label="记录id:" name="recordId">
                                    <Input/>
                                </Form.Item>
                            </Col>
                            <Col className="btn-opt" style={{padding: "0 15px"}}>
                                <Button type="primary" onClick={this.query}>查询</Button>
                                <Button onClick={this.reset}>清空</Button>
                            </Col>
                        </Row>
                    </Form>
                    <div className="text-left btn-opt">
                        <Button type="primary" onClick={this.doAdd} hidden="true">新增</Button>
                        <Button type="primary" onClick={this.doUpdate} hidden="true">修改</Button>
                        <Button type="primary" onClick={this.doDelete} hidden="true">删除</Button>
                        <Button type="primary" onClick={this.doView}>查看</Button>
                        <Button type="primary" onClick={this.doReturn}>返回</Button>
                    </div>
                    { /*
                        dataSource 为列表数组
                        onChange Table 内嵌分页 页码切换回调函数
                        pagination Table 内嵌分页 配置 同 Pagination 组件API
                    */}
                    <Table dataSource={this.state.list} bordered
                           onChange={(pagination) => this.query(pagination.current)}
                           pagination={{
                               position: ["bottomLeft"],
                               current: this.state.pageInfo.page,
                               pageSize: this.state.pageInfo.size,
                               total: this.state.pageInfo.total
                           }}
                           rowSelection={{
                               type: "radio",
                               selectedRowKeys: this.state.selectedRowKeys,
                               onChange: this.tableSelect
                           }}>
                        { /* Table columns 的语法糖 最终还是给 Table 传递 columns 参数 dataIndex 便是对象属性  */}
                        <Table.Column title="记录id" dataIndex="recordId"></Table.Column>
                        <Table.Column title="定时作业编号" dataIndex="jobCode"></Table.Column>
                        <Table.Column title="定时作业描述" dataIndex="jobDesc"></Table.Column>
                        <Table.Column title="状态" dataIndex="state"></Table.Column>
                        <Table.Column title="启动时间" dataIndex="startTime"></Table.Column>
                        <Table.Column title="结束时间" dataIndex="endTime"></Table.Column>
                        <Table.Column title="耗时(秒)" dataIndex="costTime"></Table.Column>
                        <Table.Column title="执行节点标识" dataIndex="agentId"></Table.Column>
                        <Table.Column title="结果描述" dataIndex="resultDesc"></Table.Column>
                    </Table>

                    <Modal
                        title={this.state.modelTitle}
                        visible={this.state.show}
                        onCancel={this.handleModelClose}
                        onOk={this.handleModlelOk}
                        confirmLoading={this.state.loading}
                        destroyOnClose={false}
                        keyboard={false}
                        style={{top: 20}}
                        okText="确定"
                        cancelText="取消"
                        width={'100%'}>
                        <Form ref={this.modelFormRef} labelCol={{span: 8}} wrapperCol={{span: 16}}>
                            <Row>
                                <Col span="12">
                                    <Form.Item label="记录id" name="recordId">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="定时作业编号" name="jobCode">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="定时作业描述" name="jobDesc">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="状态" name="state">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="启动时间" name="startTime">
                                        <DatePicker placeholder="请选择" showTime format="YYYY-MM-DD HH:mm:ss"
                                                    disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="结束时间" name="endTime">
                                        <DatePicker placeholder="请选择" showTime format="YYYY-MM-DD HH:mm:ss"
                                                    disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="耗时(秒)" name="costTime">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="执行节点标识" name="agentId">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                                <Col span="12">
                                    <Form.Item label="结果描述" name="resultDesc">
                                        <Input placeholder="请输入" disabled={this.state.opType == 'view'}/>
                                    </Form.Item>
                                </Col>

                            </Row>
                        </Form>
                    </Modal>
                </div>
            )
        }
    }

    ReactDOM
        .render(
            <antd.ConfigProvider locale={antd.locales.zh_CN}>
                <App/>
            </antd.ConfigProvider>,
            document
                .getElementById(
                    'app'
                )
        )
    ;
</script>
</body>
</html>
